<template>
	<view>
		<ni class="uni-ec-canvas" id="uni-ec-canvas" ref="uni-ec-canvas" canvas-id="uni-ec-canvas" :ec="ec"></ni>
	</view>
</template>

<script>
	let app =getApp().globalData;
	import ni from '@/components/uni-ec-canvas/uni-ec-canvas.vue';
	import * as echarts from '@/components/uni-ec-canvas/echarts.js';
	export default {
		components: {
			ni
		},
		data() {
			return {
			ec: {
				option: {
					animation: true,
					// color: ['#02ad81', '#bbe2e8', '#6cacde'],
					grid: {
						top: 15, //距离顶部15px
						bottom: '15%', //距离底部15%
						left: '21%',
						right: "6%",
					
					},
					calculable: false,
					
					xAxis: [{
						interval: 2, //刻度间隔
						type: 'value',
						max: 10,
						axisLine: {
							lineStyle: {
								color: '#fff'
							}
						},
						axisLabel: {
							show: false, //是否显示刻度
							color: '#fff'
						},
						splitLine: { //分割线配置
							show: true,
							lineStyle: {
								color: "#f2f2f2",
							}
						}
					}],
					yAxis: [{
						type: 'category',
						axisTick: {
							show: false
						},
						data: app.listName,
						axisLine: {
							lineStyle: {
								fontZize:11,
								fontWeight: 500,
								color: '#fff',
							}
						},
						axisLabel: {
							color: '#333',
							fontZize:12,
							fontWeight:500,
							fontFamily:'PingFangSC-Medium, PingFang SC',
						}
					}],
					series: [{
							type: 'bar',
							barWidth : 18,
							label: {
								normal: {
									show: false,
									// position: 'inside'
								}
							},
							data: app.listValue,
							itemStyle: {
								// emphasis: {
								// 	color: '#37a2da'
								// },
								normal: {
									barBorderRadius: [0, 20, 20, 0],
									color: new echarts.graphic.LinearGradient(
										0, 0, 1, 0, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
										[{
												offset: 0,
												color: '#FFF6DF'
											},
											{
												offset: 1,
												color: '#FFBD4C'
											}
										
										] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
									)
								},
							}
						},
			
					]
				} //echart 配置项
			}
			};
		}
	}
</script>

<style lang="scss">
	.uni-ec-canvas {
		width: 100%;
		height: 428upx;
		display: block;
		// background: linear-gradient(360deg, #FBFBFB 0%, #FFFFFF 100%);
	}
	
</style>
